<!-- 
  @name: 参数设置
  @date: 2020.4.7
 -->
<template>
	<view class="content">
		<view class="cardview">
			<view class="title">设置</view>
			<view class="item" v-if="hasStorage === 1">
				<view class="left">蓄注流量精度</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入蓄注流量精度"
					placeholder-class="phcolor"
					v-model.trim="storagePrecision"
				/>
			</view>
			<view class="item">
				<view class="left">储液桶总重量(吨)</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入储液桶总重量"
					placeholder-class="phcolor"
					v-model.trim="totalCapacity"
				/>
			</view>
			<view class="item">
				<view class="left">储液桶最大高度(cm)</view>
				<input
					type="number"
					class="right num"
					placeholder="请输入储液桶最大高度"
					placeholder-class="phcolor"
					v-model.trim="totalHeight"
				/>
			</view>
			<view class="item">
				<view class="left tip-box">
					<text>液位高度变化值(cm)</text>
					<image
						@tap.top="showTip = !showTip"
						style="width: 40rpx;height: 40rpx;"
						src="../../static/images/icon-query.png"
						mode="aspectFill"
					/>
					<text v-if="showTip" class="tip">液位每变化多少厘米上报一次液位值。</text>
				</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入液位高度变化值"
					placeholder-class="phcolor"
					v-model.trim="lepchange"
				/>
			</view>
			<view class="item">
				<view class="left">液位传感器零点电压(mv)</view>
				<input
					type="number"
					class="right num"
					placeholder="请输入零点电压"
					placeholder-class="phcolor"
					v-model.trim="zeroVofLep"
				/>
			</view>
			<view class="item">
				<view class="left">泵停压力(KPa)</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入泵停压力值"
					placeholder-class="phcolor"
					v-model.trim="pumpPower"
				/>
			</view>
			<!-- <view class="item">
				<view class="left">泵工作压力(KPa)</view>
				<input type="digit" class="right num" placeholder="请输入泵工作压力" placeholder-class="phcolor" v-model.trim="pumpWorkKPa" />
			</view>
			<view class="item">
				<view class="left">压力足够值(KPa)</view>
				<input type="digit" class="right num" placeholder="请输入压力足够值" placeholder-class="phcolor" v-model.trim="enoughKPa" />
			</view> -->

			<view class="item">
				<view class="left">单价(元)</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入单价"
					placeholder-class="phcolor"
					v-model.trim="ureaPrice"
				/>
			</view>
			<view class="item">
				<view class="left">加注流量精度</view>
				<input
					type="digit"
					class="right num"
					placeholder="请输入加注流量精度"
					placeholder-class="phcolor"
					v-model.trim="macPrecision"
				/>
			</view>
			<view class="item">
				<view class="left">计量单位</view>
				<view class="right r2">
					<view class="btn" :class="units === 0 ? 'sl' : ''" @tap="units = 0">升</view>
					<view class="btn" :class="units === 1 ? 'sl' : ''" @tap="units = 1">kg</view>
				</view>
			</view>
			<view class="note">换算：1升=1.09kg</view>
			<view class="item">
				<view class="left">灯光开关时间</view>
				<view class="right r2">
					<picker mode="time" :value="openTime" @change="timeChange">
						<text class="num">{{ openTime }}</text>
					</picker>
					<text class="sp">-</text>
					<picker mode="time" :value="closeTime" @change="timeChange2">
						<text class="num">{{ closeTime }}</text>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="left">品牌名称</view>
				<input
					class="right"
					placeholder="请输入品牌名称"
					placeholder-class="phcolor"
					v-model.trim="ureaType"
				/>
			</view>
		</view>

		<!-- 底部菜单 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view">
			<button class="btn_submit" @tap="submit">同步并保存设置</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			macCode: '',
			macPrecision: '',
			storagePrecision: '',
			ureaPrice: '',
			openTime: '',
			closeTime: '',
			ureaType: '工厂调试(默认)',
			units: 0,
			hasStorage: 0, //是否有蓄注流量计，0-无，1-有
			pumpPower: '',
			totalCapacity: '',
			totalHeight: '',
			lepchange: '',
			zeroVofLep: '',
			showTip: false
		};
	},
	onLoad() {
		this.deal();
	},
	methods: {
		//初始化信息
		deal() {
			let info = JSON.parse(this.$store.state.tmpData);
			console.log('info', info);
			this.hasStorage = info.hasStorage;
			this.macCode = info.macCode;
			this.macPrecision = info.macPrecision ? info.macPrecision : '';
			this.storagePrecision = info.storagePrecision ? info.storagePrecision : '';
			this.ureaPrice = info.ureaPrice ? info.ureaPrice : '';
			this.openTime = info.openTime ? info.openTime : '22:00';
			this.closeTime = info.closeTime ? info.closeTime : '08:00';
			this.ureaType = info.ureaType ? info.ureaType : '';
			this.units = info.units >= 0 ? info.units : 0;
			// 新增设置属性
			this.extProperty = JSON.parse(info.extProperty || '{}');
			this.totalCapacity =
				parseFloat((this.extProperty.capacity / 1000).toFixed(1)) || info.totalCapacity || '';
			this.totalHeight = parseInt(this.extProperty.maxLep) || info.totalHeight || '';
			this.pumpPower = info.pumpPower || '';
			this.lepchange = this.extProperty.lepchange || '';
			this.zeroVofLep = this.extProperty.zeroVofLep || '';
			this.hasPressure = info.hasPressure || 1;
			this.$store.commit('setTmpData', '');
		},
		//灯箱开启时间
		timeChange(e) {
			this.openTime = e.target.value;
		},
		//灯箱关闭时间
		timeChange2(e) {
			this.closeTime = e.target.value;
		},
		submit2() {
			this.$http({
				url: this.$api.factoryUrl + 'setdevice',
				data: {
					macCode: this.macCode,
					macPrecision: this.macPrecision,
					storagePrecision: this.storagePrecision,
					ureaPrice: this.ureaPrice,
					openTime: this.openTime,
					closeTime: this.closeTime,
					ureaType: this.ureaType,
					units: this.units,
					capacity: parseInt(this.totalCapacity * 1000), // 储液桶总重量
					maxLep: parseInt(this.totalHeight), // 储液桶总高度
					pumpPower: this.pumpPower, // 泵停压力
					zeroVofLep: this.zeroVofLep,
					lepchange: this.lepchange,
					hasPressure: this.hasPressure
				}
			}).then(res => {
				this.$successToast('保存成功');
				setTimeout(() => {
					uni.$emit('device_changeCode', this.macCode);
				}, this.$tmp.TIME_SUC);
				this.$sucBack();
			});
		},
		submit() {
			if (!this.totalCapacity) {
				this.$showToast('请输入储液桶总重量！');
				return;
			}
			if (!this.totalHeight) {
				this.$showToast('请输入储液桶最大高度！');
				return;
			}
			if (!this.lepchange) {
				this.$showToast('请输入液位高度变化值！');
				return;
			}
			if (!this.zeroVofLep) {
				this.$showToast('请输入液位传感器零点电压！');
				return;
			}
			if (!this.pumpPower) {
				this.$showToast('请输入泵停压力！');
				return;
			}
			if (!this.macPrecision) {
				this.$showToast('请输入加注流量精度！');
				return;
			}
			if (!this.storagePrecision && this.hasStorage === 1) {
				this.$showToast('请输入蓄注流量精度！');
				return;
			}
			if (!this.ureaPrice) {
				this.$showToast('请输入单价！');
				return;
			} else {
				this.ureaPrice = this.$operation(this.ureaPrice, '+', 0);
			}
			if (!this.ureaType) {
				this.$showToast('请输入品牌名称！');
				return;
			}
			this.submit2();
		}
	}
};
</script>

<style lang="scss">
.content {
	align-items: center;
}
.cardview {
	width: 730rpx;
	padding: 40rpx 30rpx;
	padding-bottom: 80rpx;
	margin-top: $spacing-col;
	border-radius: $border-radius-bm;
	background-color: $color-white;
}
.title {
	font-size: 40rpx;
}
.note {
	margin-top: 42rpx;
	margin-left: 315rpx;
	font-size: 24rpx;
	color: $color-grey;
}
.item {
	width: 100%;
	margin-top: 80rpx; 
	display: flex;
	flex-direction: row;
	align-items: center;

	.left {
		width: 314rpx;

		&.tip-box {
			position: relative;
			display: flex;
			align-items: center;
			image {
				padding: 10rpx;
			}
			.tip {
				width: 250rpx;
				position: absolute;
				padding: 8rpx 10rpx;
				border-radius: 12rpx;
				border: 1rpx solid #eee;
				top: -110rpx;
				right: -86rpx;
				background-color: #ffffff;
				z-index: 999;
				color: #999999;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -32rpx;
					transform: translateX(-50%);
					border-width: 16rpx;
					border-color: #ebeb00 transparent transparent transparent;
					border-style: solid;
				}
			}
		}
	}
	.right {
		flex: 1;
		text-align: right;
		color: $color-text-primary;
		padding-right: 20rpx;
	}
	.right.r2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		.sp {
			margin: 0 30rpx;
		}
		.btn {
			width: 120rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			margin-right: 60rpx;
			border-radius: 27rpx;
			background-color: $color-bg;
		}
		.btn.sl {
			color: $color-white;
			background-color: $color-text-primary;
		}
	}
	.num {
		font-size: 32rpx;
		font-family: $font-family-num;
	}
}
</style>
